
<template>
    <div class="grade-page">
	  <!-- 顶部选择班级 -->
	  <div class="grade-body">
		   <ul class='grade-list' >
                <li class="garde-li" v-for="(item,index) in gradeList" :key="index">
                    <div :class="currentIndex !== index ? 'grade-box' :'grade-choosed-box'" @click="choseRoleFun(item,index)">
                        {{item.sstClassName}}
                    </div>
                </li>
            </ul>
	  </div>
  </div>
</template>

<script>
export default {
		name: "grade",
		props: {
			gradeList: {
				type: Array,
				default: []
			}
		},
    data(){
			return{
				currentIndex:0,
			}
	},
  
	methods:{
		// 选角
		choseRoleFun(item,index){
			this.currentIndex =index
			this.$emit('selectClass',item)
		},
			
	}
}
</script>
<style lang="scss" scoped>
.grade-page{
	.grade-body{
			width: 100%;
			// height: auto;
			padding: 0.2rem 0;
			overflow: hidden;
			overflow-x: scroll;
	}
	.grade-body::-webkit-scrollbar {
                display: none;
	}	
	.grade-list{
			white-space: nowrap;
			.garde-li{
				width: auto;
				height: .7rem;
				line-height: .7rem;
				text-align: center;
				margin-left: .4rem;
				display: inline-block;
				.grade-box{
					font-size: .3rem;
					background-color: #eff1f3;
					color: #999999;
					border-radius: .35rem;
					padding: 0 .35rem;
				}
				.grade-choosed-box{
					font-size: .3rem;
					background-color: #05b3b6;
					color: #ffffff;
					border-radius: .35rem;
					padding: 0 .35rem;
				}
			}
		
				  
	}
}
</style>